<template>
<div class="battle">
    <div class="page">
      <div class="flex solid-bottom padding justify-between">
      <img class="userinfo-avatar"  :src="avatarUrl" background-size="cover"/>
      <img class="userinfo-avatar"  :src="counterUrl" background-size="cover"/>
      </div>
      <div class="weui-progress">
        <div class="weui-progress__bar">
          <progress :percent='progress' stroke-width="5" :show-info = 'false' activeColor="#6A5ACD" backgroundColor="#D8BFD8"/>
          <p class="time">{{restTime}}S</p>
        </div>
      </div>
    </div>
    <div class="scoreFrame">
        <div class="score1">{{score1}}</div>
        <div class="score2">{{score2}}</div>
    </div>
    <div class="flex solid-bottom padding justify-center">
      <div class="padding-sm margin-xs text-sl radius" :style="'color:white'">{{list[index].quetion}}</div>
    </div>
    <div class="padding flex flex-direction">
        <button :style='style1' class="cu-btn round lg" @click="clickAnwser1">{{list[index].anwser1}}</button>
        <button :style='style2' class="cu-btn round lg" @click="clickAnwser2">{{list[index].anwser2}}</button>
        <button :style='style3' class="cu-btn round lg" @click="clickAnwser3">{{list[index].anwser3}}</button>
        <button :style='style4' class="cu-btn round lg" @click="clickAnwser4">{{list[index].anwser4}}</button>
    </div>
</div>
</template>

<script>

export default {
  data () {
    return {
      nickName: '',
      avatarUrl: '',
      counterUrl: '',
      counterChoice: '',
      style1: 'background-color:#eee',
      style2: 'background-color:#eee',
      style3: 'background-color:#eee',
      style4: 'background-color:#eee',
      count: 0,
      index: 0,
      score1: 0,
      score2: 0,
      list: [{quetion: '1+1=?', anwser1: '2', anwser2: '3', anwser3: '4', anwser4: '5', rightAnwser: '2'}, {quetion: '2+3=?', anwser1: '4', anwser2: '5', anwser3: '6', anwser4: '7', rightAnwser: '5'}],
      progress: 100,
      restTime: 10,
      choice: '',
      counterIsTrue: false,
      isTrue: false,
      isClicked: false,
      isFinished: false
    }
  },
  mounted () {
    this.upload()
  },
  methods: {
    clickAnwser1 () {
      if (!this.isClicked) {
        console.log('点击答案：' + this.list[this.index].anwser1)
        this.choice = this.list[this.index].anwser1
        if (this.list[this.index].anwser1 === this.list[this.index].rightAnwser) {
          this.style1 = 'background-color:PaleGreen'
          this.isTrue = true
          this.score1 += parseInt(100 * (this.restTime / 10))
        } else {
          this.style1 = 'background-color:red'
        }
        this.isClicked = true
      }
    },
    clickAnwser2 () {
      if (!this.isClicked) {
        console.log('点击答案：' + this.list[this.index].anwser2)
        this.choice = this.list[this.index].anwser2
        if (this.list[this.index].anwser2 === this.list[this.index].rightAnwser) {
          this.style2 = 'background-color:PaleGreen'
          this.isTrue = true
          this.score1 += parseInt(100 * (this.restTime / 10))
        } else {
          this.style2 = 'background-color:red'
        }
        this.isClicked = true
      }
    },
    clickAnwser3 () {
      if (!this.isClicked) {
        console.log('点击答案：' + this.list[this.index].anwser3)
        this.choice = this.list[this.index].anwser3
        if (this.list[this.index].anwser3 === this.list[this.index].rightAnwser) {
          this.style3 = 'background-color:PaleGreen'
          this.isTrue = true
          this.score1 += parseInt(100 * (this.restTime / 10))
        } else {
          this.style3 = 'background-color:red'
        }
        this.isClicked = true
      }
    },
    clickAnwser4 () {
      if (!this.isClicked) {
        console.log('点击答案：' + this.list[this.index].anwser4)
        this.choice = this.list[this.index].anwser4
        if (this.list[this.index].anwser4 === this.list[this.index].rightAnwser) {
          this.style4 = 'background-color:PaleGreen'
          this.isTrue = true
          this.score1 += parseInt(100 * (this.restTime / 10))
        } else {
          this.style4 = 'background-color:red'
        }
        this.isClicked = true
      }
    },
    changeCounterInfo () {
      if (this.counterChoice === this.list[this.index].rightAnwser) {
        this.counterIsTrue = true
        if (this.counterChoice === this.list[this.index].anwser1) {
          this.style1 = 'background-color:PaleGreen'
        }
        if (this.counterChoice === this.list[this.index].anwser2) {
          this.style2 = 'background-color:PaleGreen'
        }
        if (this.counterChoice === this.list[this.index].anwser3) {
          this.style3 = 'background-color:PaleGreen'
        }
        if (this.counterChoice === this.list[this.index].anwser4) {
          this.style4 = 'background-color:PaleGreen'
        }
      } else {
        if (this.counterChoice === this.list[this.index].anwser1) {
          this.style1 = 'background-color:red'
        }
        if (this.counterChoice === this.list[this.index].anwser2) {
          this.style2 = 'background-color:red'
        }
        if (this.counterChoice === this.list[this.index].anwser3) {
          this.style3 = 'background-color:red'
        }
        if (this.counterChoice === this.list[this.index].anwser4) {
          this.style4 = 'background-color:red'
        }
      }
    },
    upload () {
      this.progress = 100
      this.style1 = 'background-color:#eee'
      this.style2 = 'background-color:#eee'
      this.style3 = 'background-color:#eee'
      this.style4 = 'background-color:#eee'
      this.choice = ''
      this.counterChoice = ''
      console.log('选项一:' + this.list[this.index].anwser1)
      console.log('选项二:' + this.list[this.index].anwser2)
      console.log('选项三:' + this.list[this.index].anwser3)
      console.log('选项四:' + this.list[this.index].anwser4)
      console.log('正确答案:' + this.list[this.index].rightAnwser)
      this._next()
    },
    _next () {
      var _this = this
      if (_this.progress <= 0) {
        _this.isClicked = false
        if (_this.index === 1) {
          // const url = '../errorbook/main'
          // const url = '../errorbook/main?nickName=' + this.nickName + '&avatarUrl=' + this.avatarUrl + '&score1=' + this.score1
          // mpvue.navigateTo({url})
        }
        if (_this.index < 1) {
          _this.index++
          _this.upload()
        }
        return true
      }
      _this.progress--
      _this.restTime = _this.progress / 10
      setTimeout(function () {
        _this._next()
      }, 100)
    }
    /*
    setting () {
      wx.request({
        url: 'http://203.195.239.100:10086/tiku/api/v1/',
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          operationId: 'queryCollection'
        },
        success: function (res) {
          console.log(res)
        },
        fail: function (error) {
          console.log(error)
        }
      })
    }
    */
  },
  onLoad: function (options) {
    console.log(options.avatarUrl)
    this.nickName = options.nickName
    this.avatarUrl = options.avatarUrl
    this.counterUrl = options.counterUrl
    // this.setting()
  }
}
</script>

<style>
.battle{
    background: url("");
    background-size: 100% 100%;
    height:100%;
    width:100%;
    position: absolute;
}
.cu-btn{
  margin:20rpx;
}
.cu-btn.lg{
  height:100rpx;
  font-size: 50rpx;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.score1{
    position:absolute;
    top:30px;
    left:10px;
    width: 75px;
    height:50px;
    color: aliceblue;
    text-align: center;
    font-size: 20px;
}
.score2{
    position:absolute;
    top:30px;
    right:10px;
    width: 75px;
    height:50px;
    color: aliceblue;
    text-align: center;
    font-size: 20px;
}
.page {
  margin-top: 40px;
  padding: 15px;
}
.weui-progress {
  margin-bottom: 25px;
}
.time{
    color: aliceblue;
    font-size: 20px;
    position: absolute;
    right: 20px
}
.userinfo-avatar {
  width: 100rpx;
  height:100rpx;
  margin: 0px;
  border-radius: 50%;
}
</style>
